<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div>
    <div>
      <label>audio input device</label>
      <select name="" id="audioSource"></select>
    </div>
    <div>
      <label>audio output device</label>
      <select name="" id="audioOutput"></select>
    </div>
    <div>
      <label>video input device</label>
      <select name="" id="videoSource"></select>
    </div>
  </div>

  <script>
    const audioSource = document.querySelector('select#audioSource');
    const audioOutput = document.querySelector('select#audioOutput');
    const videoSource = document.querySelector('select#videoSource');

    if(!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices){
      console.log('mediaDevices is not supported! please change ur browser ~');
    }else {

      const ePromise = navigator.mediaDevices.enumerateDevices();
      console.log('ePromise:', ePromise);

      navigator.mediaDevices.enumerateDevices()
        .then(gotDevices)
        .catch(handleError)
    }

    function gotDevices(deviceInfos) {
      deviceInfos.forEach(deviceInfo => {
        const option = document.createElement('option');
        option.text = deviceInfo.label;
        option.value = deviceInfo.deviceId;

        switch (deviceInfo.kind) {
          case 'audioinput':
            audioSource.appendChild(option);
            break;
          case 'audiooutput':
            audioOutput.appendChild(option);
            break;
          case 'videoinput':
            videoSource.appendChild(option);
        }
      });
    }

    function handleError(err) {
      console.log('err:',err);
    }

  </script>
</body>
</html>
